<template>
    <div>{{ person.name }} - {{ person.age }} - {{ person.work.score }} <button @click="person.age += 1">点我
            +1</button><button @click="person.work.score += 1">点我 +1</button></div>
</template>

<script>
import { reactive, readonly, shallowReadonly } from 'vue';

export default {
    name: "Demo",
    setup() {

        let person = reactive({
            name: '张三',
            age: 18,
            work: {
                score: 20
            }
        })

        // readonly 可以将响应式的数据变为只读数据，不能修改
        //person = readonly(person)

        // shallowReaddonly 将响应式数据的最外层属性变成只读属性，不可修改
        person = shallowReadonly(person)

        return {
            person
        }
    },
};
</script>

<style></style>
